import React from "react";
import { Tabs,Radio,Select,Input,Button,Row,Col } from 'antd';
import globalStyle from "./globalSet.less";
import {connect} from "dva/index";
import {message} from "antd/lib/index";
import qdbuttom from '@/assets/account/robotSetup/qdbuttom.png';
import styles from '@/pages/Account/Settings/BaseView.less';
import savebuttom from '@/assets/account/robotSetup/savebuttom.png';
const { TabPane } = Tabs;

class GlobalSet extends React.Component {
  state = {
    maxCount: "N",
    noMatchCaseReply: "abb",
    noMatchCaseAction: "stop",
    noMatchCaseKeepSlots: true,
    confusionReply: "抱歉，我不知道如何处理，请重新开始",
    confusionAction: "stop",
    noAnswerReply: "木有答案",
    robotId: "",
    dialogId: "",
    settingId: "",
  };

  componentDidMount() {
    const { currentUser, dialogId } = this.props;
    this.setState({
      robotId: currentUser.robotId,
      dialogId: dialogId
    });
    this.getSetting(currentUser.robotId);
  }

  onChange = (e,t) => {
    switch (t){
      case "noMatchCaseAction":
        this.setState({
          noMatchCaseAction: e.target.value,
        });
        break
      case "noMatchCaseKeepSlots":
        this.setState({
          noMatchCaseKeepSlots: e.target.value,
        });
        break
      case "confusionAction":
        this.setState({
          confusionAction: e.target.value,
        });
        break
      case "confusionReply":
        this.setState({
          confusionReply: e.target.value,
        });
        break
      case "noMatchCaseReply":
        this.setState({
          noMatchCaseReply: e.target.value,
        });
        break
      case "noAnswerReply":
        this.setState({
          noAnswerReply: e.target.value,
        });
        break
    }
  };

  editMaxCount = (val) => {
    this.setState({
      maxCount: val,
    });
  };

  getSetting = (robotId)=>{
    const { dispatch, dialogId } = this.props;
    dispatch({
      type: 'globalSet/getSetting',
      payload: {
        _id: "common",
        robotId: robotId,
        dialogId: dialogId
      },
      callback:(res)=>{
        console.log("res :" + JSON.stringify(res));
        this.setState({
          settingId: res.settingId,
          maxCount: res.setting.invalidAsk.maxCount,
          noMatchCaseReply: res.setting.noMatchCase.reply,
          noMatchCaseAction: res.setting.noMatchCase.action,
          noMatchCaseKeepSlots: res.setting.noMatchCase.keepSlots,
          confusionReply: res.setting.confusion.reply,
          confusionAction: res.setting.confusion.action,
          noAnswerReply: res.setting.noAnswerReply,
        });
      }
    });
  };

  doSetting = ()=>{
    const { dispatch } = this.props;
    const {dialogId, robotId, settingId} = this.state;
    dispatch({
      type: 'globalSet/doSetting',
      payload: {
        dialogId: dialogId,
        robotId: robotId,
        settingId: settingId,
        _id: "common",
        setting: {
          invalidAsk:{
            maxCount: this.state.maxCount,
            action: "stop",
            keepSlots: false
          },
          noMatchCase:{
            reply: this.state.noMatchCaseReply,
            action: this.state.noMatchCaseAction,
            keepSlots: this.state.noMatchCaseKeepSlots
          },
          confusion:{
            reply: this.state.confusionReply,
            action: this.state.confusionAction,
            keepSlots: false
          },
          noAnswerReply: this.state.noAnswerReply
        }
      },
      callback:(res)=>{
        console.log("res :" + JSON.stringify(res));
        if(res.status == 0){
          message.info("保存成功");
        }else{
          message.info("保存失败");
        }
      }
    });
  };

  render() {
    return (
      <div>
        <div className={globalStyle.area}>
          用户连续超过&nbsp;&nbsp;
          <Select value={this.state.maxCount} style={{ width: 100, boxShadow: "0 2px 15px 0 rgba(1, 1, 1, 0.15)", border: "none" }} onChange={this.editMaxCount}>
            <Select.Option value='N'>请选择</Select.Option>
            <Select.Option value='1'>1</Select.Option>
            <Select.Option value='2'>2</Select.Option>
            <Select.Option value='3'>3</Select.Option>
            <Select.Option value='4'>4</Select.Option>
            <Select.Option value='5'>5</Select.Option>
            <Select.Option value='max'>不限次数</Select.Option>
          </Select>
          &nbsp;&nbsp;次询问不相关问题, 则结束多轮会话
        </div>
        <Row>
          <Col span={12}>
            <div className={globalStyle.area}>
              <div className={globalStyle.title}>当多轮对话词槽完成后, 没有满足任何一个触发条件时:</div>
              <hr className={globalStyle.hrClass}/>
              <div className={globalStyle.dm}>
                <h5>回复话术</h5>
                <Input className={globalStyle.inputClass} placeholder="请输入回复话术" value={this.state.noMatchCaseReply} onChange={event=>{this.onChange(event,"noMatchCaseReply")}}/>
              </div>
              <div className={globalStyle.dm}>
               对话处理
                <Radio.Group className={globalStyle.radioGroup} value={this.state.noMatchCaseAction} onChange={event=>{this.onChange(event,"noMatchCaseAction")}}>
                  <Radio value='none'>不处理</Radio>
                  <Radio value='stop'>结束多轮会话</Radio>
                  <Radio value='restart'>重新开始多轮会话</Radio>
                </Radio.Group>
              </div>
              <div style={{ marginTop: '30px',color:"#c8c8c8",fontSize:'15px'}}>
               是否清空已收集的词槽
                <Radio.Group className={globalStyle.radioGroup} value={this.state.noMatchCaseKeepSlots} onChange={event=>{this.onChange(event,"noMatchCaseKeepSlots")}}>
                  <Radio value={true}>清空</Radio>
                  <Radio value={false}>不清空</Radio>
                </Radio.Group>
              </div>
            </div>
          </Col>
          <Col span={12}>
            <div className={globalStyle.area}>
              <div className={globalStyle.title}>当多轮对话流程逻辑混乱时:</div>
              <hr className={globalStyle.hrClass}/>
              <div className={globalStyle.dm}>
                <h5>回复话术</h5>
                <Input className={globalStyle.inputClass}  placeholder="请输入回复话术" value={this.state.confusionReply} onChange={event=>{this.onChange(event,"confusionReply")}} />
              </div>
              <div className={globalStyle.dm}>
                对话处理
                <Radio.Group className={globalStyle.radioGroup} value={this.state.confusionAction} onChange={event=>{this.onChange(event,"confusionAction")}}>
                  <Radio value='none'>不处理</Radio>
                  <Radio value='stop'>结束多轮会话</Radio>
                  <Radio value='restart'>重新开始多轮会话</Radio>
                </Radio.Group>
              </div>
              <div className={globalStyle.dm}>
                <h5>回当用户问题没有答案时:</h5>
                <Input className={globalStyle.inputClass} placeholder="请输入回复话术" value={this.state.noAnswerReply} onChange={event=>{this.onChange(event,"noAnswerReply")}} />
              </div>

            </div>
          </Col>
        </Row>




        <div className={styles.flexcen}>
          <div>
            {/*<Button type="primary" onClick={this.doSetting}>保存</Button>*/}
            <img onClick={this.doSetting} src={savebuttom} />
          </div>
        </div>
      </div>
    );
  }
}

export default connect (({ user }) => ({
  currentUser: user.currentUser
}))(GlobalSet);
